package com.gitee.wsl.compose.ui.lazyscaffold


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
//import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.lerp
import com.gitee.wsl.compose.ui.base.Layout

@Composable
private fun ScaffoldScreenLazyScrollState() {
    val snapAreaState = rememberSnapLazyScrollAreaState()
    Layout.CollapsibleSnapContentLazyScaffold(
        snapAreaState = snapAreaState,
        modifier = Modifier.background(Color.White),
        topBar = {
            Box(
                modifier = Modifier
                    .height(50.dp)
                    .fillMaxWidth()
                    .background(Color.Yellow)
            )
        },
        collapsibleArea = {
            Box(
                modifier = Modifier
                    .graphicsLayer {
                        alpha = 1f - snapAreaState.scrollOffset
                        translationY = lerp(0f, -size.height, snapAreaState.scrollOffset)
                    }
                    .height(200.dp)
                    .fillMaxWidth()
                    .background(Color.Green)
            )
        },
        stickyHeader = {
            Box(
                modifier = Modifier
                    .height(100.dp)
                    .fillMaxWidth()
                    .background(Color.Blue)
            )
        },
        bottomBar = {
            Box(
                modifier = Modifier
                    .height(50.dp)
                    .fillMaxWidth()
                    .background(Color.Yellow.copy(0.4f))
            )
        },
    ) {
        LazyColumn(
            modifier = Modifier.snapLazyScrollAreaBehaviour(state = snapAreaState),
            state = snapAreaState.listState,
            verticalArrangement = Arrangement.spacedBy(10.dp),
            contentPadding = it,
            content = {
                collapsibleHeaderPaddingItem(this)
                items(20) {
                    Box(
                        modifier = Modifier
                            .height(80.dp)
                            .fillMaxWidth()
                            .background(Color.Red)
                    )
                }
            }
        )
    }
}

@Composable
private fun ScaffoldScreenScrollState() {
    val snapAreaState = rememberSnapScrollAreaState()
    Layout.CollapsibleSnapContentScaffold(
        snapAreaState = snapAreaState,
        topBar = {
            Box(
                modifier = Modifier
                    .height(50.dp)
                    .fillMaxWidth()
                    .background(Color.Yellow)
            )
        },
        collapsibleArea = {
            Box(
                modifier = Modifier
                    .graphicsLayer {
                        alpha = 1f - snapAreaState.scrollOffset
                        translationY = lerp(0f, -size.height, snapAreaState.scrollOffset)
                    }
                    .height(200.dp)
                    .fillMaxWidth()
                    .background(Color.Green)
            )
        },
        stickyHeader = {
            Box(
                modifier = Modifier
                    .height(100.dp)
                    .fillMaxWidth()
                    .background(Color.Blue)
            )
        },
        bottomBar = {
            Box(
                modifier = Modifier
                    .height(50.dp)
                    .fillMaxWidth()
                    .background(Color.Yellow.copy(0.4f))
            )
        },
        content = { bottomBarPadding ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .snapScrollAreaBehaviour(snapAreaState),
                verticalArrangement = Arrangement.spacedBy(10.dp),
                content = {
                    CollapsibleHeaderPaddingItem()
                    repeat(20) {
                        Box(
                            modifier = Modifier
                                .height(80.dp)
                                .fillMaxWidth()
                                .background(Color.Red)
                        )
                    }
                    Spacer(modifier = Modifier.padding(bottomBarPadding))
                }
            )
        }
    )
}

/*
@Preview(showBackground = true)
@Composable
fun ScaffoldScreenPreview() {
   ScaffoldScreenScrollState()
}

@Preview(showBackground = true)
@Composable
fun ScaffoldLazyScreenPreview() {
    ScaffoldScreenLazyScrollState()
}*/
